<script setup>
import { random, sleep } from "solar";
import Button from '@/components/common/Button.vue'
import Input from '@/components/common/Input.vue'
import NumberBox from '@/components/common/NumberBox.vue'
const current = ref();
const starting = ref(false);
const isEnd = ref(false);
const rounds = ref(5);
const gameInt = ref(null);
const result = ref([]);
const res = ref(false);
const speed = ref(500);
const answer = ref(Array(rounds.value));
const randomNum = () => {
	const _random = random(9, 1)
	if (current.value === _random) {
		randomNum()
		return
	}
	current.value = _random
	console.log('randomNum', current.value)
	console.log('randomNum', result.value)
};
const stratGame = () => {
	starting.value = true;
	const roundsNum = Number(rounds.value)
	answer.value = Array(roundsNum)
	gameInt.value = setInterval(async () => {
		if (result.value.length === Number(roundsNum)) {
			clearInterval(gameInt.value)
			starting.value = false
			isEnd.value = true
			return
		}
		current.value = ' '
		await sleep(100)
		randomNum();
		result.value.push(current.value)
	}, Number(speed.value));
};
const check = () => {
	console.log('answer', answer)
	res.value = answer.value.join() === result.value.reverse().join()
};
const reload = () => {
	current.value = ''
	result.value = []
	answer.value = Array(rounds.value)
	res.value = false
	isEnd.value = false
};
console.log('answer', answer)
</script>
<template>
	<template v-if="!isEnd">
		<Button @click="stratGame" v-if="!starting">开始</Button>
		<div v-else class="num">{{ !current ? 'ready' : current }}</div>
	</template>
	<template v-else>
		<div class="answer">
			<NumberBox v-model="answer[index]" v-for="(item, index) in answer" :key="index"></NumberBox>
		</div>
		<Button @click="check" block>验证</Button>
		<div class="result-text">
			{{ res ? '正确' : '错误' }}
		</div>
	</template>
	<div class="opeartion" v-if="!starting">
		<Input v-model="rounds" placeholder="次数" style="padding: 1px; width: 50px;" />
		<Button @click="reload" style="padding: 2px; width: 30px;">🔄</Button>
		<Input v-model="speed" placeholder="次数" style="padding: 2px; width: 50px;" />
		<!-- <Button @click="check">验证</Button> -->
	</div>
</template>
<style lang="less" scoped>
.opeartion {
	width: 200px;
	position: fixed;
	bottom: 50px;
	display: flex;
	height: 30px;
	justify-content: space-between;
}

.num {
	font-weight: bold;
	font-size: 100px;
}

.answer {
	display: flex;
	margin-bottom: 10px;
}

.result-text {
	margin-top: 10px;
	width: 100%;
	text-align: center;
}
</style>